<template>
	<div>
		<div class="my-body">
      <el-row>
        <el-col :span="24">
			<div class="ipt_a">
				<div style="float: left; line-height: 30px;"  class="tab_font-size">医院地区：</div>
				<el-input v-model="input" placeholder="请输入内容"
					style=" width: 150px;height: 50px; float: left;"></el-input>
			</div>
			<div class="ipt_a">
				<div style="float: left; line-height: 30px;"  class="tab_font-size">订货状态：</div>
				<el-select v-model="value" placeholder="请选择">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</div>

			<div class="ipt_b">
				<div style="float: left; line-height: 30px; "  class="tab_font-size">申请日期</div>
				<div style=" margin-left: 20px; float: left;">

					<el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
						end-placeholder="结束日期">
					</el-date-picker>
				</div>
			</div>
			<div style="float: left;">
				<el-button type="primary" plain>查询</el-button>
				<el-button plain>清空</el-button>
			</div>
		</el-col>
	</el-row>
			<div>
				
				<el-button type="primary" @click="dialogVisible = true" plain>申请</el-button>
				<el-button type="danger" plain>删除</el-button>
				<el-dialog title="添加订货申请" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
					<div style="width: 100%;">
						<el-form ref="form" :model="form" label-width="80px">
							<el-form-item label="申请编号">

								<el-input v-model="form.name" style="width: 200px;"></el-input>
								<el-button type="primary" @click="onSubmit">刷新</el-button>
							</el-form-item>
							<el-form-item label="申请时间">
								<el-col :span="11">
									<el-date-picker type="date" placeholder="选择日期" v-model="sizeForm.date1"
										style="width: 100%;"></el-date-picker>
								</el-col>

							</el-form-item>
							<el-form-item label="经销商">
								<el-input v-model="form.name" style="width: 50px;"></el-input>
								<el-input v-model="form.name" style="width: 200px;"></el-input>
								<el-button type="primary" @click="onSubmit">...</el-button>
							</el-form-item>
							<el-form-item label="申请理由">
							
								<el-select v-model="form.region" placeholder="请选择有效授权编号">
									<el-option label="产品近效期" value="shanghai"></el-option>
									<el-option label="投诉" value="beijing"></el-option>
									<el-option label="保障" value="beijing"></el-option>
								</el-select>
								
							</el-form-item>
							<el-form-item label="医院(地区)">
								<el-input v-model="form.name" style="width: 50px;"></el-input>
								<el-input v-model="form.name" style="width: 200px;"></el-input>
								<el-button type="primary" @click="dialogVisiblea = true">...</el-button>
							</el-form-item>

							
							<el-form-item label="联系人">
								<el-input v-model="form.name" style="width: 500px;"></el-input>
								
							</el-form-item>
							<el-form-item label="联系人电话">
								<el-input v-model="form.name" style="width: 500px;"></el-input>
							
							</el-form-item>
							<el-form-item label="收货地址">
								<el-input v-model="form.name" style="width:500px;"></el-input>
								
							</el-form-item>



							<el-form-item>
								<el-button type="primary" @click="chanpingguige = true">添加</el-button>
								<el-button type="warning">删除</el-button>
								<el-button type="danger">清空</el-button>
							</el-form-item>
						</el-form>
						<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
							style="width: 100%">
							<el-table-column type="selection" width="55">
							</el-table-column>
							<el-table-column fixed prop="bianhao" label="系列" width="150">
							</el-table-column>
							<el-table-column prop="senddate" label="类型" width="120">
							</el-table-column>
							<el-table-column prop="enddate" label="规格" width="120">
							</el-table-column>
							<el-table-column prop="name" label="换货序列号" width="120">
							</el-table-column>
							<el-table-column prop="province" label="备注" width="120">
							</el-table-column>
							
						</el-table>
						<div style="margin-top: 20px; font-size: 20px;">
							换货合计数量：0件
						
						</div>
						
						
						<el-form>
						<el-form-item label="备注">
							<el-input type="textarea"></el-input>
						</el-form-item>
						</el-form>
						<el-button type="primary">保存</el-button>  <el-button type="warning"> 	返回</el-button>
					</div>
				</el-dialog>
				<el-dialog title="产品规格明细表" :visible.sync="chanpingguige" width="40%" :before-close="handleClose">
					<div style="width: 100%; height: 500px;">
						<div style="width: 100%; height: 50px;">
							<div style="float: left; width: 50%;  float: left;">
								<div style="float: left; line-height: 30px;">申请编号：</div>
								<el-input  style="width:200px;"></el-input>
								<el-button type="primary">刷新</el-button>
							</div>
							<div style="float: left; width: 50%; float: left;">
								<div style="float: left; line-height: 30px;">申请时间：</div>
								  <el-date-picker
								      v-model="value1"
								      type="date"
								      placeholder="选择日期">
								    </el-date-picker>
							</div>	
						</div>
						<div style="float: left; width: 100%; height: 400px;">
							<div style="float: left; width: 50%; height: 100%;">
								<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
							</div>
							<div style="float: left; width: 50%; height: 100%;">
								<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
									style="width: 100%">
									<el-table-column type="selection" width="55">
									</el-table-column>
									<el-table-column fixed prop="bianhao" label="产品规格" width="150">
									</el-table-column>
									<el-table-column prop="senddate" label="产品单价" width="120">
									</el-table-column>
									<el-table-column  label="产品数量" width="120">
										<input style="width: 100px;" />
									</el-table-column>
									<el-table-column prop="name" label="备注" width="120">
											<input style="width: 100px;" />
									</el-table-column>
									
								</el-table>
								<el-button type="primary" >添加</el-button>
								<el-button type="primary">返回</el-button>
							</div>
							
						</div>
						
					
					</div>
				</el-dialog>
				<el-dialog title="添加地区" :visible.sync="dialogVisiblea" width="10%" :before-close="handleClose">
					<div style="width: 100%;">
						<el-button type="primary" @click="hospital = true">医院</el-button>
						<el-button type="primary" @click="area = true">地区</el-button>
					</div>
				</el-dialog>
				<el-dialog title="经销商地址管理" :visible.sync="jinxiaoshang" width="40%" :before-close="handleClose">
					<div style="width: 100%; height: 500px;">
						<div class="listdizhi">
							<div class="lie">
								<div class="listdizhia">
									<div>陶靖靖</div>
									<div>18303552774</div>
									<div style="color:red;">默认</div>
									<div style="padding: 10px 5px; background: #bbb; margin-top: -10px;">收货地址</div>
								</div>
								<div class="listdizhia">
									<div>江苏苏州市虎丘区狮山街道</div>
									<div>玉山路40号玉山商业广场1幢303</div>

								</div>
							</div>
							<img src="../../assets/401_images/401.gif"
								style="width: 40px; height: 40px; margin-top: 30px;" />
						</div>
						<div style="margin-top: 30px; float: left;">
							<el-button type="primary" @click="shouhuor = true">添加</el-button>
							<el-button type="warning">删除</el-button>
						</div>

					</div>
				</el-dialog>
				<el-dialog title="收货人地址" :visible.sync="shouhuor" width="20%" :before-close="handleClose">
					<div style="width: 100%; height: 500px;">

						<el-form ref="form" :model="form" label-width="80px">
							<el-form-item label="收件人">
								<el-input v-model="form.name"></el-input>
							</el-form-item>
							<el-form-item label="手机号码">
								<el-select v-model="form.region" style="width: 100px;  float: left;" placeholder="请选择">
									<el-option label="+86" value="1"></el-option>
									<el-option label="+852" value="2"></el-option>
									<el-option label="+0853" value="3"></el-option>
									<el-option label="+882" value="4"></el-option>
								</el-select>
								<el-input v-model="form.name" style="float: left; width: 200px; "></el-input>
							</el-form-item>
							<el-form-item label="所在地区">
								<el-input v-model="form.name" style="width:200px;"></el-input>
								<el-button type="primary" @click="diquxuanzhe = true">...</el-button>
							</el-form-item>
							<el-form-item label="详细地址">
								<el-input v-model="form.name"></el-input>
							</el-form-item>

							<el-form-item label="标签">

								<el-radio-group v-model="form.resource">
									<el-radio label="发票地址"></el-radio>
									<el-radio label="合同地址"></el-radio>
									<el-radio label="收货地址"></el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="默认地址">
								<el-checkbox-group v-model="form.type">
									<el-checkbox label="发票地址" name="type"></el-checkbox>
								</el-checkbox-group>
							</el-form-item>

							<el-form-item>
								<el-button type="primary" @click="onSubmit">立即创建</el-button>
								<el-button>取消</el-button>
							</el-form-item>
						</el-form>
					</div>
				</el-dialog>
				<el-dialog title="收货人地址" :visible.sync="diquxuanzhe" width="20%" :before-close="handleClose">
					<el-button type="primary">中国大陆</el-button>
					<el-button  type="primary">中国港澳台</el-button>
					<div style="margin-top: 30px;">
						<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
					</div>
				</el-dialog>
				<el-dialog title="医院科室查询" :visible.sync="hospital" width="40%" :before-close="handleClose">
					<div style="width: 100%;">
						<div class="ipt_a">
							<div style="float: left; line-height: 30px;">医院编号：</div>
							<el-input v-model="input" placeholder="请输入内容"
								style=" width: 150px;height: 50px; float: left;"></el-input>
						</div>
						<div class="ipt_a">
							<div style="float: left; line-height: 30px;">医院名称：</div>
							<el-input v-model="input" placeholder="请输入内容"
								style=" width: 150px;height: 50px; float: left;"></el-input>
						</div>
						<div class="ipt_a">
							<el-button type="primary">查询</el-button>
						</div>

						<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
							style="width: 100%">
							<el-table-column type="selection" width="55">
							</el-table-column>
							<el-table-column fixed prop="bianhao" label="医院编号" width="150">
							</el-table-column>
							<el-table-column prop="senddate" label="医院名称" width="120">
							</el-table-column>
							<el-table-column prop="enddate" label="科室名称" width="120">
							</el-table-column>
							<el-table-column prop="name" label="省份" width="120">
							</el-table-column>
							<el-table-column prop="province" label="地址" width="120">
							</el-table-column>

						</el-table>
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="currentPage" :page-sizes="[5, 10]" :page-size="pageSize"
							:total="tableData.length" layout="total, sizes, prev, pager, next, jumper">
						</el-pagination>
					</div>
				</el-dialog>
				<el-dialog title="地区选择" :visible.sync="area" width="30%" :before-close="handleClose">
					<div style="width: 100%;">
						<div>福建省全境(s350)</div>
						<div style="margin-top: 30px;">
							<el-button type="success ">放弃返回</el-button>
							<el-button type="primary">确定提交</el-button>
						</div>

					</div>
				</el-dialog>
				<div style="margin-top: 30px;">
					<template>
						<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
							style="width: 100%"  border  fit size="medium" :header-cell-style="{background:'#f5f7fa',color:'#606266'}">
							<el-table-column type="selection" width="55">
							</el-table-column>
							<el-table-column fixed prop="bianhao" label="申请编号" width="150">
							</el-table-column>
							<el-table-column prop="senddate" label="申请日期" width="120">
							</el-table-column>
							<el-table-column prop="enddate" label="订单类型" width="120">
							</el-table-column>
							<el-table-column prop="name" label="使用积分" width="120">
							</el-table-column>
							<el-table-column prop="province" label="订货医院或地区" width="120">
							</el-table-column>
							<el-table-column prop="address" label="订货状态" width="200">
							</el-table-column>
							<el-table-column prop="shouqfang" label="订货方" width="200">
							</el-table-column>
							<el-table-column prop="jingxiaos" label="订货方地址" width="200">
							</el-table-column>
							<el-table-column prop="jingxiaos" label="收货人" width="200">
							</el-table-column>
							<el-table-column prop="jingxiaos" label="收货人电话" width="200">
							</el-table-column>
							<el-table-column prop="jingxiaos" label="收货地址" width="200">
							</el-table-column>
							<el-table-column prop="jingxiaos" label="付款凭证" width="200">
							</el-table-column>
							<el-table-column prop="jingxiaos" label="财务发票" width="200">
								<template slot-scope="scope">
									<!-- <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> -->
									<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">下载</el-button>
								</template>
							</el-table-column>
							<el-table-column prop="peisonf" label="签字回单" width="200">
								<template slot-scope="scope">
									<!-- <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> -->
									<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">上传</el-button>
								</template>
							</el-table-column>

							<el-table-column label="操作日志" width="100">
								<template>
									<!-- <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> -->
									<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">审核日志</el-button>
								</template>
							</el-table-column>
							<el-table-column prop="vip" label="备注" width="200">
							</el-table-column>
						</el-table>
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="currentPage" :page-sizes="[5, 10]" :page-size="pageSize"
							:total="tableData.length" layout="total, sizes, prev, pager, next, jumper">
						</el-pagination>
					</template>
				</div>

			</div>
		</div>


		<div class="my-body">

			<div>
				<div style="float: left; ">
					<el-button type="primary" plain>查看物流</el-button>
					<el-button type="danger" plain>订单货</el-button>
				</div>

				<div style="float: left; margin-left: 20px; line-height: 30px;">
					申请信息:申请编号【DH037807742409180001】应付货款【47422】</div>
				<div style="width: 100%; float: left ; margin-top: 20px">
					<template>
						<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
							style="width: 100%"  border  fit size="medium" :header-cell-style="{background:'#f5f7fa',color:'#606266'}">
							<el-table-column type="selection">
							</el-table-column>
							<el-table-column fixed prop="bianhao" label="产品序列">
							</el-table-column>
							<el-table-column prop="senddate" label="产品类型">
							</el-table-column>
							<el-table-column prop="enddate" label="产品规格">
							</el-table-column>
							<el-table-column prop="name" label="单价">
							</el-table-column>
							<el-table-column prop="province" label="订货数量" >
							</el-table-column>

							<el-table-column prop="vip" label="备注">
							</el-table-column>
						</el-table>
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="currentPage" :page-sizes="[5, 10]" :page-size="pageSize"
							:total="tableData.length" layout="total, sizes, prev, pager, next, jumper">
						</el-pagination>
					</template>
				</div>

			</div>
		</div>
	</div>
</template>

<script>
	export default {

		data() {
			return {
				key: 1, // 为了能每次切换权限的时候重新初始化指令
				options: [{
					value: '1',
					label: '全部'
				}, {
					value: '2',
					label: '已签收'
				}, {
					value: '3',
					label: '未签收'
				}],
				data: [{
					label: '中国大陆',
					children: [{
						label: '上海',
					},{
						label: '北京',
					},
					{
						label: '四川',
					}
					]
				}],
				 value1: '',
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				value: '',
				chanpingguige:false,
				dialogVisible: false,
				dialogVisiblea: false,
				hospital: false,
				area: false,
				currentPage: 1,
				pageSize: 5,
				jinxiaoshang: false,
				shouhuor: false,
				diquxuanzhe: false,
				tableData: [{
					bianhao: 'PS074107742412L',
					senddate: '2024-05-02',
					enddate: '2024-12-31',
					name: '左心耳',
					province: '完成授权',
					city: '普陀区',
					address: '苏州市中心医院',
					shouqfang: '鹰潭市方园医药有限公司',
					jingxiaos: '鹰潭市方园医药有限公司',
					peisonf: '鹰潭市方园医药有限公司',
					shouqyy: '入院',
					shangcaizhibiao: 3
				}, {
					bianhao: 'PS074107742412L',
					senddate: '2024-05-02',
					enddate: '2024-12-31',
					name: '左心耳',
					province: '完成授权',
					city: '普陀区',
					address: '苏州市中心医院',
					shouqfang: '鹰潭市方园医药有限公司',
					jingxiaos: '鹰潭市方园医药有限公司',
					peisonf: '鹰潭市方园医药有限公司',
					shouqyy: '入院',
					shangcaizhibiao: 3
				}, {
					bianhao: 'PS074107742412L',
					senddate: '2024-05-02',
					enddate: '2024-12-31',
					name: '左心耳',
					province: '完成授权',
					city: '普陀区',
					address: '苏州市中心医院',
					shouqfang: '鹰潭市方园医药有限公司',
					jingxiaos: '鹰潭市方园医药有限公司',
					peisonf: '鹰潭市方园医药有限公司',
					shouqyy: '入院',
					shangcaizhibiao: 3
				}, {
					bianhao: 'PS074107742412L',
					senddate: '2024-05-02',
					enddate: '2024-12-31',
					name: '左心耳',
					province: '完成授权',
					city: '普陀区',
					address: '苏州市中心医院',
					shouqfang: '鹰潭市方园医药有限公司',
					jingxiaos: '鹰潭市方园医药有限公司',
					peisonf: '鹰潭市方园医药有限公司',
					shouqyy: '入院',
					shangcaizhibiao: 3
				}, {
					bianhao: 'PS074107742412L',
					senddate: '2024-05-02',
					enddate: '2024-12-31',
					name: '左心耳',
					province: '完成授权',
					city: '普陀区',
					address: '苏州市中心医院',
					shouqfang: '鹰潭市方园医药有限公司',
					jingxiaos: '鹰潭市方园医药有限公司',
					peisonf: '鹰潭市方园医药有限公司',
					shouqyy: '入院',
					shangcaizhibiao: 3
				}, {
					bianhao: 'PS074107742412L',
					senddate: '2024-05-02',
					enddate: '2024-12-31',
					name: '左心耳',
					province: '完成授权',
					city: '普陀区',
					address: '苏州市中心医院',
					shouqfang: '鹰潭市方园医药有限公司',
					jingxiaos: '鹰潭市方园医药有限公司',
					peisonf: '鹰潭市方园医药有限公司',
					shouqyy: '入院',
					shangcaizhibiao: 3
				}, {
					bianhao: 'PS074107742412L',
					senddate: '2024-05-02',
					enddate: '2024-12-31',
					name: '左心耳',
					province: '完成授权',
					city: '普陀区',
					address: '苏州市中心医院',
					shouqfang: '鹰潭市方园医药有限公司',
					jingxiaos: '鹰潭市方园医药有限公司',
					peisonf: '鹰潭市方园医药有限公司',
					shouqyy: '入院',
					shangcaizhibiao: 3
				}, {
					bianhao: 'PS074107742412L',
					senddate: '2024-05-02',
					enddate: '2024-12-31',
					name: '左心耳',
					province: '完成授权',
					city: '普陀区',
					address: '苏州市中心医院',
					shouqfang: '鹰潭市方园医药有限公司',
					jingxiaos: '鹰潭市方园医药有限公司',
					peisonf: '鹰潭市方园医药有限公司',
					shouqyy: '入院',
					shangcaizhibiao: 3
				}, {
					bianhao: 'PS074107742412L',
					senddate: '2024-05-02',
					enddate: '2024-12-31',
					name: '左心耳',
					province: '完成授权',
					city: '普陀区',
					address: '苏州市中心医院',
					shouqfang: '鹰潭市方园医药有限公司',
					jingxiaos: '鹰潭市方园医药有限公司',
					peisonf: '鹰潭市方园医药有限公司',
					shouqyy: '入院',
					shangcaizhibiao: 3
				}, {
					bianhao: 'PS074107742412L',
					senddate: '2024-05-02',
					enddate: '2024-12-31',
					name: '左心耳',
					province: '完成授权',
					city: '普陀区',
					address: '苏州市中心医院',
					shouqfang: '鹰潭市方园医药有限公司',
					jingxiaos: '鹰潭市方园医药有限公司',
					peisonf: '鹰潭市方园医药有限公司',
					shouqyy: '入院',
					shangcaizhibiao: 3
				}],
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				sizeForm: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				}

			}
		},
		methods: {
			onSubmit() {
				console.log('submit!');
			},
			handleClose(done) {
				done();
				// this.$confirm('确认关闭？')
				// 	.then(_ => {
				// 		done();
				// 	})
				// 	.catch(_ => {});
			},

			handleClick(row) {
				console.log(row);
			},
			handleSizeChange(val) {
				this.pageSize = val;
			},
			handleCurrentChange(val) {
				this.currentPage = val;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ipt_a {
		width: 300px;
		height: 50px;
		float: left;
	}

	.ipt_b {
		width: 450px;
		height: 50px;
		float: left;
	}

	.listdizhi {
		width: 100%;
		height: 100px;
		float: left;
		border-bottom: 1px solid;
	}

	.lie {
		width: 90%;
		height: 100%;
		float: left;

	}

	.listdizhia {
		width: 100%;
		height: 50px;
		float: left;
	}

	.listdizhia div {
		float: left;
		margin-left: 30px;
	}
</style>